<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../layui/layui.js" charset="utf-8"></script>
    <script src="../../js/jquery-3.4.1.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../../layui/formSelects-v4.css"/>
    <script src="add.js"></script>
    <style>
        .env-config {
            display: flex;
            align-items: center; /* 垂直居中对齐 */
            margin-bottom: 10px; /* 每行之间的下边距 */

        }
        #form{
            max-height: 500px; /* 设置最大高度 */
            overflow-y: auto; /* 当内容超过最大高度时显示滚动条 */
            padding-bottom: 60px; /* 为底部按钮留出空间 */
        }

        .env-config:not(:first-child) {
            margin-left: 70px; /* 从第二行开始设置左边距 */
        }

        .equals-sign {
            margin: 0 8px; /* 为等于号添加左右边距 */
        }
        .submit-buttons {
            position: absolute; /* 绝对定位 */
            bottom: 30px; /* 固定在底部 */
            left: 0; /* 固定在左侧 */
            width: 100%; /* 宽度为100% */
            text-align: center; /* 居中对齐按钮 */
            padding-top: 10px; /* 上边距 */
        }
    </style>
</head>
<body>
<form class="layui-form" id="form">
    <br>
    <div class="layui-form-item layui-form">
        <label class="layui-form-label" style="width: 150px">所属项目<span style="color: red">*</span></label>
        <div class="layui-input-inline projectId" style="width: 250px">
            <input type="text" name="projectName" id="projectName" oninput="projectNameInput()" class="layui-input" lay-verify="required"
                   placeholder="请输入项目名称搜索" style="position:absolute;z-index:2;width:88%;" value="" autocomplete="off">
            <select name="projectId" placeholder="请输入项目名称搜索" id="projectId" lay-filter="projectId" >
            </select>
        </div>
        <label class="layui-form-label" style="width: 80px">命名空间<span style="color: red">*</span></label>
        <div class="layui-input-inline namespaceId" style="width: 250px">
            <input type="text" name="namespaceName" id="namespaceName" oninput="namespaceNameInput()" class="layui-input" lay-verify="required"
                   placeholder="请输入项目名称搜索" style="position:absolute;z-index:2;width:88%;" value="" autocomplete="off">
            <select name="namespaceId" placeholder="请输入项目名称搜索" id="namespaceId" lay-filter="namespaceId" >
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-form">
        <label class="layui-form-label" style="width: 150px">docker宿主机<span style="color: red">*</span></label>
        <div class="layui-input-inline dockerId" style="width: 250px">
            <input type="text" name="dockerName" id="dockerName" oninput="dockerNameInput()" class="layui-input" lay-verify="required"
                   placeholder="请输入docker服务器名称搜索" style="position:absolute;z-index:2;width:88%;" value="" autocomplete="off">
            <select name="dockerId" placeholder="请输入docker服务器名称搜索" id="dockerId" lay-filter="dockerId" >
            </select>
        </div>
        <label class="layui-form-label" style="width: 80px">nacos配置</label>
        <div class="layui-input-inline nacosId" style="width: 250px">
            <input type="text" name="nacosName" id="nacosName" oninput="nacosNameInput()" class="layui-input"
                   placeholder="仅微服务需配置" style="position:absolute;z-index:2;width:88%;" value="" autocomplete="off">
            <select name="nacosId" placeholder="请输入nacos名称搜索" id="nacosId" lay-filter="nacosId" >
            </select>
        </div>
    </div>

    <div class="layui-form-item  layui-form">
        <label class="layui-form-label" style="width: 150px">模块名称<span style="color: red">*</span></label>
        <div class="layui-input-inline" style="width: 250px">
            <input type="text"  name="moduleName" id="moduleName" lay-verify="required" autocomplete="on" placeholder="lenovo-auth"
                   class="layui-input">
        </div>
        <label class="layui-form-label" style="width: 80px">profiles_active<span style="color: red">*</span></label>
        <div class="layui-input-inline" style="width: 250px">
            <input type="text"  name="springProfilesActive" id="springProfilesActive" lay-verify="required" autocomplete="on" placeholder="lenovo-auth"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 150px">本地开发包位置<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input type="text" style="width: 620px" name="localFile" id="localFile" autocomplete="on"  placeholder="C:\workspace_git\dev\ump-platform\lenovo-auth\target\lenovo-auth.jar" lay-verify="required"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item  layui-form">
        <label class="layui-form-label" style="width: 150px">模块版本<span style="color: red">*</span></label>
        <div class="layui-input-inline" style="width: 250px">
            <input type="text"  name="tag" id="tag" autocomplete="on"   lay-verify="required" class="layui-input">
        </div>
        <label class="layui-form-label" style="width: 80px">jdk版本<span style="color: red">*</span></label>
        <div class="layui-input-inline" style="width: 250px">
            <select name="jdkVersion" lay-verify="required">
                <option value="jdk8">jdk8</option>
                <option value="jdk17">jdk17</option>
                <option value="jdk19">jdk19</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item ">
        <label class="layui-form-label" style="width: 150px">镜像构建目标位置<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input type="text" style="width: 620px" name="remoteTargetDirectory" id="remoteTargetDirectory" autocomplete="on" placeholder="/minio_data/docker_original/lenovo-auth" lay-verify="required"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 150px">挂载路径</label>
        <div class="layui-input-block">
            <input type="text" style="width: 620px" id="mountThePath"  name="mountThePath"   placeholder="/opt/nacos/logs:/home/nacos/logs (宿主机:容器) 【多个逗号隔开】"
                   autocomplete="on" class="layui-input" >
        </div>
    </div>
    <!-- 环境配置 -->
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 150px">环境配置</label>
        <div class="layui-input-block env-configs">
            <!-- 单个环境配置项 -->
            <div class="env-config d-flex align-items-center">
                <input type="text" name="envKey[]" placeholder="Key" class="layui-input" style="width: 200px;">
                <span class="equals-sign mx-2">=</span>
                <input type="text" name="envValue[]" placeholder="Value" class="layui-input" style="width: 200px;">
                <button type="button" class="layui-btn layui-btn-primary add-env"><i class="layui-icon">&#xe654;</i></button>
                <button type="button" class="layui-btn layui-btn-danger remove-env" style="display: none;"><i class="layui-icon">&#xe640;</i></button>
            </div>
        </div>
    </div>

    <div class="layui-form-item submit-buttons">
        <div class="layui-input-block" style="position: absolute;left: 420px;">
            <button class="layui-btn" lay-submit="" lay-filter="save">提交</button>
            <button class="layui-btn"  id="close">关闭</button>
        </div>
    </div>
</form>
</body>
</html>